<template>
	<view>
		<fui-bottom-popup :zIndex="9999" :show="bomShow" @close="closePopup">
			<view class="fui-custom__wrap">
				<view class="">
					<fui-section title="请选择您要发布的类型" color="#fd5531" isLine></fui-section>
				</view>
				<view class="list">
					<fui-grid :showBorder="false" :columns="3" :square="true">
						<fui-grid-item :highlight="false" v-for="(item,index) in publish" :key="index">
							<view class="fui-grid__cell" @click="onitem(item)">
								<image style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" :src="item.icon" class="fui-icon__2x"
									mode="aspectFill">
								</image>
								<view style="color: var(--fui-color-subtitle);font-size: 26rpx;">{{item.name}}</view>
							</view>
						</fui-grid-item>
					</fui-grid>
				</view>
			</view>
		</fui-bottom-popup>
	</view>
</template>

<script setup>
	import { ConfigStore } from '@/store/modules/config.js'
	const api = uniCloud.importObject('qc-article', {
		customUI: true // 取消自动展示的交互提示界面
	})
	import { GlobalStore } from "@/store/index.js";
	import { ref, reactive, watch,computed } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	const publish = computed(()=>(ConfigStore().publish))
	const bomShow = computed(()=>(GlobalStore().bomShow))

	const current = ref(0)
	const styles = {
		height: 50,
		bottom: 0,
		radius: true
	}
	const onitem = (vm) => {
		let item = {
			_id: vm._id,
			publish_type: vm.publish_type
		}
		// #ifdef APP-PLUS
		uni.navigateTo({
			url: `${vm.open_url}?title=${JSON.stringify(item)}`
		})
		// #endif
		// #ifdef H5
		uni.navigateTo({
			url: `${vm.open_url}?title=${encodeURI(JSON.stringify(item))}`
		})
		// #endif
		closePopup()
	}


	function closePopup() {
		GlobalStore().changebomShow()
	}

</script>

<style lang="scss" scoped>
	.fui-grid__cell {
		margin: auto;
		text-align: center;
	}

	.swiperd {
		border-radius: 16rpx;
	}

	.fui-banner__item {
		width: 100%;
		height: 360rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 16rpx;
	}

	.fui-banner__wrap {
		border-radius: 20rpx;
		height: 200rpx;
		image{
			border-radius: 20rpx;
		}
	}

	.fui-custom__wrap {
		width: 100%;
		margin-top: 50rpx;
		// height: 550rpx;
	}

	.fui-custom__head {
		border-radius: 16rpx;
		margin: 32rpx auto;
		width: 90%;
		height: 200rpx;
	}

	.list {
		// height: 450rpx;
		margin: 32rpx;
		display: flex;
		justify-content: space-around;
	}

	.list-i {
		margin-top: 12rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
	}

	.list-i text {
		color: var(--fui-color-subtitle);
		margin-top: 22rpx;
		font-size: 28rpx;
	}
</style>